<template>
  <div>
    <div style="margin-right: 83%">
      <el-button type="primary" v-if="able ==1" @click="changeAble">
        查看学生
      </el-button>
      <el-button v-if="able == 1" @click="ableChange">
        查看考试
      </el-button>
      <el-button v-if="able ==2" @click="changeAble">
       查看学生
      </el-button>
      <el-button type="primary" v-if="able == 2" @click="ableChange">
        查看考试
      </el-button>
    </div>

    <div v-if="able == 1">
      <div style="float: right;margin-bottom: 30px">
        <el-badge :value="number" class="item">
          <el-button type="warning" @click="dialogFormVisible=true">学生申请</el-button>
        </el-badge>
      </div>
      <template>
        <el-table
            :data="classStudents"
            border
            style="width: 100%">
          <el-table-column label="id" prop="id" show-overflow-tooltip width="60px" align="center">
          </el-table-column>
          <el-table-column
            prop="username"
            label="学生账号"
            width="180">
        </el-table-column>
          <el-table-column
              prop="trueName"
              label="真实姓名"
              width="180">
          </el-table-column>
          <el-table-column
              prop="phone"
              label="电话号码"
              width="180">
          </el-table-column>
          <el-table-column
              prop="email"
              label="电子邮箱">
          </el-table-column>
          <el-table-column
              label="操作"
              width="180"
              align="center">
            <template slot-scope="scope">
              <el-button type="danger" size="mini" @click="openUpdateRefuseStudent(scope.row.id)">
                删除学生
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>





    <div v-if="able == 2" style="margin-top: 61px">
      <template>
        <el-table
            :data="classExams"
            border
            style="width: 100%">
          <el-table-column
              prop="examName"
              label="考试名称"
              width="180">
          </el-table-column>
          <el-table-column
              prop="examDesc"
              label="考试描述">
          </el-table-column>
          <el-table-column label="考试开始时间">
            <template slot-scope="scope">
             {{scope.row.starTime}}
            </template>
          </el-table-column>
          <el-table-column label="考试结束时间">
            <template slot-scope="scope">
              {{scope.row.endTime}}
            </template>
          </el-table-column>
          <el-table-column
              prop="totalScore"
              label="总分数"
              width="180">
          </el-table-column>
          <el-table-column
              prop="passScore"
              width="180"
              label="及格分">
          </el-table-column>
          <el-table-column
              label="操作"
              width="180"
              align="center">
            <template slot-scope="scope">
              <el-button v-if="new Date(scope.row.starTime)<timeNow && new Date(scope.row.endTime)>timeNow"  size="mini" type="primary" :disabled="true">考试进行中</el-button>
              <el-button v-if="new Date(scope.row.starTime)>timeNow"  size="mini" type="warning" :disabled="true">考试未开始</el-button>
              <el-button v-if="new Date(scope.row.endTime)<timeNow"  size="mini" type="danger" @click="viewResult(scope.row)" >查看成绩</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <div style="text-align: right;margin: 20px auto">
        <el-pagination
            layout="total,prev, pager, next"
            @current-change="changePage"
            :total="total"
            :current-page="currentPage"
            :page-size="pageSize">
        </el-pagination>
      </div>
    </div>

    <div>
      <el-dialog title="申请列表" :visible.sync="dialogFormVisible" width="1100px">
        <el-table
            :data="classDisabledStudent"
            border
            style="width: 100%">
          <el-table-column label="id" prop="id" show-overflow-tooltip width="60px" align="center">
          </el-table-column>
          <el-table-column
              prop="username"
              label="学生账号"
              width="180">
          </el-table-column>
          <el-table-column
              prop="trueName"
              label="真实姓名"
              width="180">
          </el-table-column>
          <el-table-column
              prop="phone"
              label="电话号码"
              width="180">
          </el-table-column>
          <el-table-column
              prop="email"
              label="电子邮箱">
          </el-table-column>
          <el-table-column
              label="操作"
              width="180"
              align="center">
            <template slot-scope="scope">
              <el-button type="success" size="mini" @click="openUpdateConsentStudent(scope.row.id)">
                同意
              </el-button>
              <el-button type="danger" size="mini" @click="openUpdateRefuseStudent(scope.row.id)">
                拒绝
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
    </div>
  </div>
</template>

<script>
let jwt = localStorage.getItem("localJwt");
let classId = localStorage.getItem("localUser").split(",")[6].split(":")[1];
let className = localStorage.getItem("localUser").split(",")[7].split(":")[1];
console.log(jwt);
console.log(classId);
console.log(className);
export default {
  data(){
    return{
      timeNow:new Date(),
      able:1,
      classStudents:[],
      classDisabledStudent:[],
      classExams:[],
      dialogFormVisible:false,
      total:0,
      pageSize:0,
      currentPage:1,
      number:'',
      localUser:{}
    }
  },
  methods:{
    changeAble(){
      this.able = 1;
    },

    ableChange(){
      this.able = 2;
    },

    viewResult(exam){
      console.log(exam.id)
      this.$router.push("/class/achievement?examId="+exam.id)
    },

    //分页改变
    changePage(value){
      console.log(this.currentPage)
      this.$router.replace("?page="+value);
      this.loadExams()
    },
    //同意弹窗
    openUpdateConsentStudent(id){
      this.$confirm('确定同意吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.updateConsentStudent(id);
      }).catch(() => {
      });
    },
    updateConsentStudent(id){
      /*同意进入*/
      let url = 'http://localhost:9281/user-consent-student/'+id;
      console.log("loadStudents的url:"+url);
      this.axios.create(
          {
            'headers':{
              'Authorization':jwt
            }
          }
      ).post(url).then((response)=>{
        let jsonResult = response.data;
        if (jsonResult.state == 20000){
          this.$message({
            showClose: true,
            message: '同意成功',
            type: 'success'
          });
          this.loadStudents();
          this.loadNumber();
        }else{
          this.$message.error(jsonResult.message);
        }
      })
    },

    //拒绝弹窗
    openUpdateRefuseStudent(id){
      this.$confirm('确定删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.updateRefuseStudent(id);
      }).catch(() => {
      });
    },
    updateRefuseStudent(id){
      /*拒绝进入*/
      let url = 'http://localhost:9281/user-refuse-student/'+id;
      console.log("loadStudents的url:"+url);
      this.axios.create(
          {
            'headers':{
              'Authorization':jwt
            }
          }
      ).post(url).then((response)=>{
        let jsonResult = response.data;
        if (jsonResult.state == 20000){
          this.$message({
            showClose: true,
            message: '拒绝成功',
            type: 'danger'
          });
          this.loadStudents();
          this.loadNumber();
        }else{
          this.$message.error(jsonResult.message);
        }
      })
    },

    handleApplication(){
      this.$router.push("/class/handle-application");
    },
    loadStudents(){
      this.localUser = JSON.parse(localStorage.getItem("localUser"));
      if(this.localUser==null){
        alert("您未登录")
        this.$router.push('/')
      }
      let url = 'http://localhost:9281/user-listByClassName/'+this.localUser.className;
      console.log("loadStudents的url:"+url);
      this.axios.create(
          {
            'headers':{
              'Authorization':jwt
            }
          }
      ).get(url).then((response)=>{
        let jsonResult = response.data;
        if (jsonResult.state == 20000){
          this.classStudents = jsonResult.data;
          if (this.classStudents.length == 0){
            this.$message.warning("当前班级暂无学生！")
          }
        }else{
          this.$message.error(jsonResult.message);
        }
      })
    },

    loadNumber(){
      let url = 'http://localhost:9281/user-listByClassName-disabled/'+this.localUser.className;
      console.log("loadStudents的url:"+url);
      this.axios.create(
          {
            'headers':{
              'Authorization':jwt
            }
          }
      ).get(url).then((response)=>{
        let jsonResult = response.data;
        if (jsonResult.state == 20000){
          this.classDisabledStudent = jsonResult.data;
          this.number = this.classDisabledStudent.length
        }else{
          this.$message.error(jsonResult.message);
        }
      })
    },
    loadExams(){
      let page = this.$router.currentRoute.query.page;
      if(page<1||page==null){
        page=1;
      }
      let param = {
        id:this.localUser.id,
        className:this.localUser.className
      };
      param = this.qs.stringify(param);
      let url = 'http://localhost:9283/exam/list-teacher-className/'+page+"?"+param;
      console.log(url)
      this.axios.create(
          {
            'headers':{
              'Authorization':jwt
            }
          }
      ).get(url).then((response)=>{
        let jsonResult = response.data;
        if (jsonResult.state == 20000){
          if(jsonResult.data.list.length==0){
            let page= +this.$router.currentRoute.query.page-1;
            if(page>2){
              this.$router.replace("?page="+this.$router.currentRoute.query.page-1);
            }
          }
          this.classExams = jsonResult.data.list;
          this.total = jsonResult.data.total;
          this.currentPage = jsonResult.data.currentPage;
          this.pageSize = jsonResult.data.pageSize;
          if (jsonResult.jwt!=null){
            localStorage.setItem("localJwt",jsonResult.jwt);
          }
        }else if(jsonResult.state==70100){
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
          this.$router.push('/')
        }else{
          this.$message.error(jsonResult.message);
        }
      })
    },
  },
  mounted(){
    this.loadStudents();
    this.loadNumber();
    this.loadExams();
  },
}
</script>

<style scoped>

</style>
